<template>
  <view class="card grid grid-cols-4 gap-20px m-10px">
    <template v-for="item in optionList">
      <view class="text-center" @click="handlerOptItmClick(item)">
        <view class="text-center">
          <u-icon class="inline-block" :name="item.icon" size="30px"/>
        </view>
        <label class="text-12px">{{item.text}}</label>
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import UIcon from "@/uni_modules/uview-plus/components/u-icon/u-icon.vue";
interface OptionItem{
  icon: string
  text: string
  callback?: Function
  url?: string
}
const optionList = ref<OptionItem[]>([
  {
    icon:'order',
    text: '书籍发布',
    url: '/pages/issue/index'
  },
  {
    icon:'map',
    text: '地址管理',
    // url: '/pages/notif/index'
  },
  {
    icon:'home',
    text: '我的学校',
    // url: '/pages/notif/index'
  },
  {
    icon:'setting',
    text: '设置',
    // url: '/pages/notif/index'
  },
])
// 操作项点击事件
const handlerOptItmClick = (item:OptionItem) => {
  if(item.url){
    uni.navigateTo({
      url: item.url
    })
  }
}
</script>

<style lang="scss">
.my-page{
  .header-bg-box{
    background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
  }
  // 用户头像
  .user-avatar{
    position: absolute;
    top: 0;
    transform: translate(-50%,-50%);
    left: 50%;
  }
}
</style>
